<script setup></script>

<template>
  <div class="u-input">
    <!--input输入-->
    <el-input v-bind="$attrs"></el-input>
  </div>
</template>

<style lang="scss" scoped>
.u-input {
  :deep(.el-input__wrapper) {
    background: #051221;
    border-radius: 4px;
    border: 1px solid #38435b;
    padding: 0 12px;
    height: 40px;
    transition: border-color 0.2s;

    // 聚焦状态
    &.is-focus {
      box-shadow: none;
      border-color: #409eff;
    }

    // 悬停状态
    &:hover {
      border-color: #5a7bb7;
    }

    // 禁用状态
    &.is-disabled {
      opacity: 0.5;
    }
  }

  :deep(.el-input__inner) {
    color: #ffffff;
    font-size: 14px;
    &::placeholder {
      color: #5a7bb7;
    }
  }

  // 清除按钮
  :deep(.el-input__clear) {
    color: #5a7bb7;
    &:hover {
      color: #409eff;
    }
  }
}
</style>
